<template>
    <div :id="id" class="pe-tab-pane">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from 'vue';


interface Props {
    label?: string,
    disabled?: boolean,
    name?: string | number,
    closable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    label: "",
    disabled: false,
    closable: false
})

const id = ref<string>("")
const labelList = inject("pe-tabs-labelList", ref<string[]>([]))
const nameList = inject("pe-tabs-nameList", ref<(string | number)[]>([]))

onMounted(() => {
    if(typeof props.name === 'string' || typeof props.name === 'number') {
        id.value = `pane-${props.name}`
        nameList.value.push(props.name)
    } else {
        nameList.value.push("")
    }
    labelList.value.push(props.label)
})
</script>

<script lang="ts">
export default {
    name: "pe-tab-pane"
}
</script>